<template>
  <AModalPro
    v-bind="$attrs"
    title="添加用户"
    :maskClosable="false"
    :confirmLoading="loading"
    @ok="onOk"
    @cancel="handleCancel"
    @close="props.onCancel"
  >
    <UserEditFrom
      ref="formRef"
      v-model:value="formState"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
      :rules="userRules"
    >
    </UserEditFrom>
  </AModalPro>
</template>

<script setup>
import { ref, reactive, toValue } from 'vue';
import { AModalPro } from '@/components/iteration';
import { useState } from '@/hooks';
import { userRules } from '@/constants/rules';
import { UserEditFrom } from '../modules';

defineOptions({
  inheritAttrs: false // 禁用透传
});

const props = defineProps({
  onFinish: Function,
  onCancel: Function
});

const initValues = {
  userName: '',
  nickName: '',
  phoneNumber: '',
  email: '',
  status: 0,
  remark: ''
};
const formRef = ref();
const formState = reactive(initValues);
const [loading, setLoading] = useState(false);

const handleCancel = () => {
  toValue(formRef).resetFields();
  props.onCancel?.();
};

const onOk = async () => {
  try {
    setLoading(true);
    await toValue(formRef).callback.validate().then(props.onFinish);
    toValue(formRef).resetFields();
  } catch (e) {
    await Promise.reject(e);
  } finally {
    setLoading(false);
  }
};
</script>

<style lang="scss" scoped></style>
